<template>
  <div class="book-detail" v-loading="loading">
    <el-row :gutter="20" v-if="book">
      <el-col :span="8">
        <el-card>
          <img :src="book.cover" class="book-image" />
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <h1>{{ book.title }}</h1>
          <div class="info-item">
            <span class="label">作者：</span>
            <span>{{ book.author }}</span>
          </div>
          <div class="info-item">
            <span class="label">价格：</span>
            <span class="price">¥{{ book.price }}</span>
          </div>
          <div class="info-item">
            <span class="label">库存：</span>
            <span :class="{ 'stock-warning': book.stock < 10 }">
              {{ book.stock }} 件
            </span>
          </div>
          <div class="description">
            <h3>图书简介</h3>
            <p>{{ book.description }}</p>
          </div>
          <div class="actions">
            <el-input-number
              v-model="quantity"
              :min="1"
              :max="book.stock"
              size="large"
            />
            <el-button
              type="primary"
              size="large"
              :disabled="!book.stock"
              @click="handleAddToCart"
            >
              加入购物车
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getBookById } from '@/api/book'
import { addToCart } from '@/api/cart'
import type { Book } from '@/api/book'

const route = useRoute()
const router = useRouter()
const book = ref<Book | null>(null)
const quantity = ref(1)
const loading = ref(false)

const loadBook = async () => {
  const id = Number(route.params.id)
  if (isNaN(id)) {
    ElMessage.error('无效的图书ID')
    router.push('/books')
    return
  }

  loading.value = true
  try {
    book.value = await getBookById(id)
  } catch (error) {
    ElMessage.error('获取图书详情失败')
    router.push('/books')
  } finally {
    loading.value = false
  }
}

const handleAddToCart = async () => {
  if (!book.value) return

  try {
    await addToCart(book.value.id, quantity.value)
    ElMessage.success('成功加入购物车')
  } catch (error) {
    ElMessage.error('加入购物车失败')
  }
}

onMounted(() => {
  loadBook()
})
</script>

<style scoped>
.book-detail {
  padding: 20px;
}

.book-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.info-item {
  margin: 15px 0;
  font-size: 16px;
}

.label {
  color: #666;
  margin-right: 10px;
}

.price {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
}

.stock-warning {
  color: #e6a23c;
}

.description {
  margin: 20px 0;
}

.description h3 {
  margin-bottom: 10px;
  color: #303133;
}

.description p {
  color: #606266;
  line-height: 1.6;
}

.actions {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}
</style> 